●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Persistent left navigation drawer with grouped links (Inventory, Transactions, Administration).
- Top app bar with global search, notifications and account icon.
- KPI cards (Total Items, In Stock, Low Stock, Suppliers).
- Tabbed main area (Overview, Items, Transactions, Reports, Settings) using MudTabs.
- Items section with filters (search, category, status), export/Add actions and a MudDataGrid with selection, quick filter and hideable columns.
- Transactions grid with search and MudDataGrid listing recent transactions.
- Placeholders for charts and advanced reports.
## Key components
- MudDrawerContainer, MudDrawer, MudAppBar, MudIconButton
- MudTabs, MudTabPanel
- MudDataGrid (SelectColumn, PropertyColumn, TemplateColumn), MudTextField, MudSelect, MudButton
- MudPaper, MudText, MudIcon, MudSpacer
## How it works
- Data binding uses @bind-Value for search/filters (_itemSearch, _transactionSearch, _selectedCategory, _selectedStatus) and @bind-SelectedItems for grid selection (_selectedItems).
- QuickFilter delegates (ItemQuickFilter, TransactionQuickFilter) perform client-side filtering for MudDataGrid.
- OnInitialized seeds demo data and CalculateKpis computes KPI values.
- ToggleDrawer toggles drawer state and OnAddItem is a placeholder for add-item flow.
- MudDataGrid is configured for Filterable, MultiSelection, QuickFilter and Column templates for status rendering.
## Styling
- Uses MudBlazor components for structure and theme (Color.Primary, Elevation, Typo).
- Tailwind utility classes are used for layout and responsiveness (flex, grid, gap-*, p-4, hidden sm:block, md:grid-cols-2, lg:grid-cols-4).
- Layout adapts with Tailwind breakpoints; MudBlazor panels provide consistent spacing and elevation.
## Reuse steps
1. Add MudBlazor NuGet and register services: builder.Services.AddMudServices();
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS in wwwroot or layout.
3. Add Tailwind CSS utilities to the project build pipeline or include the compiled CSS.
4. Copy models (InventoryItemModel, InventoryTransactionModel) and this component into Pages or Components folder.
5. Replace SeedDemoData and local lists with real API/service injections (register and inject inventory services). Wire Add/Edit dialogs (MudDialog) and EditForm validation for item forms.
## Limitations & next steps
- This file is a single-page demo with seeded data; no backend, authentication, or authorization is wired.
- Add dialog forms (MudDialog + EditForm + DataAnnotationsValidator) for create/edit flows and server-side APIs for CRUD and export.
- Implement paging/sorting server-side if dataset grows; integrate charts for Overview and Reports.
- Add role-based UI controls in Administration and secure endpoints in the API layer.